<template>
  <div class="app-container">
    <el-card class="main">
      <h1>购买声音复刻</h1>

      <div class="pay-info">
        <p><label>时长: </label>1年</p>
        <p><label>复刻模型数: </label>1</p>
        <p><label>剩余次数: </label>8</p>
        <p><label>适用设备: </label>该用户的所有设备</p>
        <p><label>原价: </label>¥150.00</p>
        <p><label>活动优惠: </label><span>-¥51.00</span></p>
        <p><label>总费用: </label><strong>¥99.00</strong></p>
      </div>

      <div class="pay-code">
        <img src="@/assets/images/profile.jpg" alt="profile" />
        <p>请使用微信扫码支付</p>
      </div>
    </el-card>

    <el-dialog
      title="购买须知"
      :visible.sync="open"
      width="800px"
      append-to-body
      class="dialog-form"
    >
      <div class="p-txt">
        <p>版本生效日期：2025年5月30日</p>
        <p>
          尊敬的用户，感谢您选择小智AI声音复刻服务！请您在购买本服务前，务必谨慎阅读以下条款：
        </p>
        <p>
          本须知被视为小智AI相应《用户协议》的补充协议，是其不可分割的组成部分，与其构成统一整体，本须知未明确/约定的则以《用户协议》以及小智AI声音复刻服务页面显示为准。
        </p>
        <p>1.【服务权益】</p>
        <p>
          您购买的声音复刻服务，支持您克隆自己的声音或上传您已取得合法授权他人声音，包含如下核心服务权益：
        </p>

        <p>
          （1）使用期限为1年，使用期限自您支付金额购买服务当日起算，即您需要在付款之日起一年内使用服务中包含的克隆次数。
        </p>

        <p>（2）一个小智AI账号项下的复刻声音，同一时间使用的设备数量不超过2台。</p>

        <p>2.【合法使用】</p>
        <p>
          您理解并同意，由于您的小智AI账号关联您的个人信息及小智AI的商业信息，为保障信息安全，您购买的声音复刻服务仅限于本人小智AI账号使用，且使用场景需符合小智AI经营者规定，未经允许，不得转让、出租、出售或以任何形式授权第三方使用。
        </p>

        <p>3.【联系我们】</p>
        <p>
          若您对以上条款或服务有疑问或存在特殊使用场景，敬请您通过邮箱联系小智AI经营者：
          xiaozhi.ai@tenclass.com
        </p>
        <p>版本生效日期：2025年5月30日</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="cancel">我已阅读并同意</el-button>
      </div>
    </el-dialog>
    <!--  底部  -->
    <detault-footer />
  </div>
</template>
<script>
export default {
  name: "Agents",
  data() {
    return {
      open: true,
      title: "",
      form: {},
      queryParams: {},
      loading: false,
      sysUserList: [{}],
      showSearch: true,
    };
  },
  methods: {
    // 获取列表数据
    getList() {},
    // 关闭弹窗
    cancel() {
      this.open = false;
      this.reset();
    },
    // 弹窗提交
    submitForm() {},
    // 添加产品
    handleAdd() {
      this.title = "创建产品（SKU）";
      this.form = {};
      this.open = true;
      console.log(this.open);
    },
    // 修改产品
    handleEdit(item) {
      this.title = "编辑产品";
      this.open = true;
    },
    // 表单初始化
    reset() {
      this.form = {};
      this.$refs.child.resetFormFun();
    },
    // 搜索
    handleQuery() {},
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.main {
  min-height: calc(100vh - 200px);
  max-width: 800px;
  margin: 22px auto;
  width: 90%;
  padding: 20px 0;
}
.p-txt {
  font-size: 14px;
  line-height: 1.58;
}
.pay-info {
  font-size: 14px;
  line-height: 1.58;
  padding: 0 30px;
  p {
    flex-wrap: wrap;
    display: flex;
    padding: 11px 0;
    &:last-child {
      border-top: solid 1px #ccc;
    }
    label {
      width: 150px;
    }
  }
  span {
    color: #f00;
  }
}
.dialog-form {
  max-width: 800px;
  margin: 22px auto;
  width: 90%;
  min-height: calc(100vh - 250px);
}
.pay-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
  font-size: 14px;
  line-height: 1.5714285714285714;
  color: red;
  img {
    display: block;
    width: 300px;
  }
}
</style>
